/* Shared Curelocare brand skin for Charac templates */

:root {
  --curelocare-primary: #f28e72;
  --curelocare-secondary: #3d2156;
  --curelocare-black: #1a1025;
  --curelocare-grey: #8b8494;
  --curelocare-grey-light: #ede9f2;
  --curelocare-grey-bg: #f8f6fb;
  --curelocare-white: #ffffff;
  --curelocare-gradient-brand: linear-gradient(
    135deg,
    #3d2156 0%,
    #ae9ccb 60%,
    #f28e72 100%
  );
  --curelocare-gradient-subtle: linear-gradient(
    135deg,
    #fff6ee 0%,
    #fdeae2 100%
  );
  --curelocare-shadow-sm: 0 1px 4px rgba(61, 33, 86, 0.06);
  --curelocare-shadow-md: 0 4px 16px rgba(61, 33, 86, 0.09);
  --curelocare-shadow-lg: 0 8px 32px rgba(61, 33, 86, 0.12);
  --curelocare-shadow-brand: 0 4px 20px rgba(242, 142, 114, 0.25);
  --curelocare-radius-md: 10px;
  --curelocare-radius-lg: 16px;
  --curelocare-radius-xl: 24px;
  --curelocare-radius-pill: 999px;
  --curelocare-button-padding-y: 13px;
  --curelocare-button-padding-x: 28px;
  --curelocare-button-background: var(--curelocare-gradient-brand);
  --curelocare-button-color: var(--curelocare-white);
  --curelocare-button-border: 1px solid transparent;
  --curelocare-border-width: 1px;
  --curelocare-card-padding: 28px;
  --curelocare-hero-background: var(--curelocare-gradient-brand);
  --curelocare-hero-text-color: var(--curelocare-white);
}

.charac-product-list-wrapper,
.charac-product-page,
.charac-service-page,
.charac-cart-page,
.charac-checkout-page,
.charac-confirm-page,
.charac-appointment-page,
.charac-summary-page,
.charac-confirmation-page,
.preconsultation-container,
.ryft-payment-grid {
  color: var(--curelocare-black) !important;
}

.charac-product-list-wrapper,
.charac-product-page,
.charac-service-page,
.charac-cart-page,
.charac-checkout-page,
.charac-confirm-page,
.charac-appointment-page,
.charac-summary-page,
.charac-confirmation-page,
.preconsultation-container {
  background: #f8f6fb;
}

/* Shared hero/header treatment */
.charac-search-header,
.charac-page-header,
.charac-summary-header,
.charac-success-header,
.preconsultation-header {
  position: relative;
  overflow: hidden;
  border-radius: var(--curelocare-radius-xl) !important;
  background: var(--curelocare-hero-background);
  color: var(--curelocare-hero-text-color) !important;
  box-shadow: var(--curelocare-shadow-lg);
}

.charac-search-title,
.charac-page-title,
.charac-summary-greeting,
.charac-success-title,
.heading-message h1,
.heading-message h2 {
  color: var(--curelocare-white) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.charac-search-subtitle,
.charac-page-subtitle,
.charac-summary-subtitle,
.charac-success-message,
.heading-message p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 500;
}

/* Cards and surfaces */
.charac-product-item,
.product-section,
.product-purchase-card,
.testimonial-card,
.related-product-card,
.cart-items-section,
.order-summary-card,
.cart-item,
.checkout-card,
.summary-card,
.address-card-display,
.collect-card,
.address-modal-content,
.success-box,
.welcome-box,
.charac-pharmacy-card,
.charac-date-block,
.timeSlotsTabsContainer,
.consultationContainer,
.paymentContainer,
.charac-modal-content,
.charac-summary-body,
.charac-card,
.preconsultation-container .form-body,
.modal-content,
.ryft-card-col,
.ryft-summary-card {
  border: var(--curelocare-border-width) solid var(--curelocare-grey-light);
  border-radius: var(--curelocare-radius-lg) !important;
  background: var(--curelocare-white);
  padding: var(--curelocare-card-padding) !important;
  box-shadow: var(--curelocare-shadow-sm);
}

.charac-product-item:hover,
.product-section:hover,
.product-purchase-card:hover,
.related-product-card:hover,
.cart-item:hover,
.checkout-card:hover,
.summary-card:hover,
.charac-section:hover,
.charac-card:hover {
  border-color: rgba(242, 142, 114, 0.35) !important;
  box-shadow: var(--curelocare-shadow-md);
}

/* Typography */
.section-title,
.cart-title,
.summary-title,
.checkout-section-title,
.charac-section-title,
.charac-date-title,
.timeSlotsTitle,
.filter-title,
.product-title,
.product-card-title,
.product-card-title a,
.charac-card-title,
.charac-modal-title,
.modal-title,
.ryft-header,
.confirm-title,
.welcome-header {
  color: var(--curelocare-black) !important;
  font-weight: 700;
}

.section-content,
.product-subtitle,
.trust-item,
.empty-cart-text,
.summary-label,
.checkout-card p,
.pharmacy-address,
.charac-summary-value,
.charac-card-text,
.confirm-sub,
.welcome-text,
.products-count {
  color: var(--curelocare-black) !important;
  font-weight: 500;
}

/* Brand buttons */
.btn-primary,
.btn-submit,
.btn-consultation,
.charac-tab-btn.active,
.charac-letter-btn.available.active,
.checkout-btn,
.pay-btn,
.save-address-btn,
.ryft-pay-btn,
.charac-appointment-button,
.charac-modal-continue-btn,
.charac-confirm-btn,
.btn-continue,
.btn-reset,
.charac-btn-primary,
.continue-shopping-link,
.btn-buy {
  border: var(--curelocare-button-border);
  border-radius: var(--curelocare-radius-pill) !important;
  background: var(--curelocare-button-background);
  color: var(--curelocare-button-color) !important;
  padding: var(--curelocare-button-padding-y) var(--curelocare-button-padding-x) !important;
  box-shadow: var(--curelocare-shadow-brand);
  font-weight: 700;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}

.btn-primary:hover,
.btn-submit:hover,
.btn-consultation:hover,
.checkout-btn:hover,
.pay-btn:hover,
.save-address-btn:hover,
.ryft-pay-btn:hover,
.charac-appointment-button:hover,
.charac-modal-continue-btn:hover,
.charac-confirm-btn:hover,
.btn-continue:hover,
.btn-reset:hover,
.charac-btn-primary:hover,
.continue-shopping-link:hover,
.btn-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(242, 142, 114, 0.35);
}

.btn-secondary,
.btn-outline,
.charac-btn-outline,
.btn-undo,
.btn-cancel,
.change-address-btn,
.add-address-dashed,
.filter-trigger-btn,
.btn-contact-pharmacist,
.charac-back-link,
.back-link,
.charac-page-btn {
  border: 2px solid var(--curelocare-primary);
  border-radius: var(--curelocare-radius-pill) !important;
  background: transparent;
  color: var(--curelocare-primary) !important;
  font-weight: 700;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-undo:hover,
.btn-cancel:hover,
.change-address-btn:hover,
.add-address-dashed:hover,
.filter-trigger-btn:hover,
.btn-contact-pharmacist:hover,
.charac-back-link:hover,
.back-link:hover,
.charac-page-btn:hover {
  background: rgba(242, 142, 114, 0.06);
}

button:disabled,
.checkout-btn:disabled,
.pay-btn:disabled,
.charac-appointment-button[disabled],
.charac-confirm-btn:disabled,
.btn-continue:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Pills, tabs, and selectors */
.charac-tab-btn,
.charac-letter-btn,
.delivery-btn,
.payment-btn,
.date-btn,
.more-btn,
.tabsHeader span,
.slotLabel,
.consultationTypeLabel,
.paymentTypeLabel,
.quantity-btn {
  border-radius: var(--curelocare-radius-pill) !important;
  border-color: var(--curelocare-grey-light) !important;
  font-weight: 700;
}

.delivery-btn.is-active,
.payment-btn.is-active,
.date-btn.selected,
.tabsHeader span.activeTab,
.slotLabel.selected,
.consultationTypeLabel.is-active,
.paymentTypeLabel.is-active,
.charac-calendar-cell.is-selected {
  border-color: transparent !important;
  background: var(--curelocare-button-background);
  color: var(--curelocare-white) !important;
  box-shadow: var(--curelocare-shadow-brand);
}

/* Inputs and form controls */
.charac-search-input,
.quantity-input,
.charac-notes,
.charac-form-control,
.form-field input,
.form-field select,
.form-field textarea,
.collect-card input[type="text"],
.collect-card input[type="email"],
.collect-card input[type="tel"],
.preconsultation-container input,
.preconsultation-container select,
.preconsultation-container textarea {
  border: 1.5px solid var(--curelocare-grey-light) !important;
  border-radius: var(--curelocare-radius-md) !important;
  background: var(--curelocare-white);
  color: var(--curelocare-black) !important;
  font-weight: 500;
}

.charac-search-input:focus,
.quantity-input:focus,
.charac-notes:focus,
.charac-form-control:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.collect-card input:focus,
.preconsultation-container input:focus,
.preconsultation-container select:focus,
.preconsultation-container textarea:focus {
  border-color: var(--curelocare-primary) !important;
  outline: none;
}

/* Product and list surfaces */
.charac-search-box {
  border-radius: var(--curelocare-radius-pill) !important;
  box-shadow: var(--curelocare-shadow-sm);
}

.icon-container,
.trust-icon,
.empty-cart-icon,
.charac-summary-icon,
.header-icon-box,
.icon-container,
.trust-icon,
.empty-cart-icon,
.charac-summary-icon,
.header-icon-box,
.payment-icon-box,
.confirm-icon-circle,
.welcome-user-icon,
.charac-success-icon .payment-icon-box,
.confirm-icon-circle,
.welcome-user-icon {
  background: #fdeae2;
  color: var(--curelocare-primary) !important;
  border-radius: var(--curelocare-radius-md) !important;
}

.price-amount,
.current-price,
.summary-value,
.amount-display,
.charac-price,
.product-price {
  color: var(--curelocare-black) !important;
  font-weight: 700;
}

.pline-note,
.card-badge,
.discrete-badge,
.pharmacy-label,
.product-subtitle,
.charac-detail-label,
.processing-note {
  border-radius: var(--curelocare-radius-pill) !important;
}

/* Cart and checkout */
.cart-layout,
.checkout-layout {
  gap: 28px;
}

.apply-coupon-btn,
.coupon-btn {
  color: var(--curelocare-primary) !important;
  font-weight: 700;
}

.total-row,
.summary-row.total {
  border-color: var(--curelocare-grey-light) !important;
}

.remove-item {
  color: #dc2626 !important;
  font-weight: 700;
}

/* Appointment pages */
.charac-appointment-container {
  gap: 28px;
}

.charac-pharmacy-image {
  background: var(--curelocare-gradient-subtle);
}

.charac-section-title::before {
  background: var(--curelocare-gradient-brand);
}

.charac-calendar-panel {
  border: var(--curelocare-border-width) solid var(--curelocare-grey-light);
  border-radius: var(--curelocare-radius-lg) !important;
  box-shadow: var(--curelocare-shadow-lg);
}

.radio-option,
.checkbox-option {
  border: var(--curelocare-border-width) solid var(--curelocare-grey-light);
  border-radius: var(--curelocare-radius-md) !important;
}

.radio-option:has(input:checked),
.checkbox-option:has(input:checked) {
  border-color: var(--curelocare-primary) !important;
  background: #fdeae2;
}

.progress-bar-fill {
  background: var(--curelocare-button-background);
}

/* Payment and confirmation */
.ryft-payment-grid {
  background: #f8f6fb;
  padding: 56px 24px !important;
}

.success-box,
.charac-success-header {
  text-align: center;
}

/* Mobile */
@media (max-width: 991px) {
  .cart-layout,
  .checkout-layout,
  .charac-appointment-container,
  .product-layout,
  .faq-container {
    grid-template-columns: 1fr;
  }

  .order-summary-section,
  .checkout-summary,
  .charac-appointment-sidebar,
  .product-sidebar {
    position: static;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .charac-search-header,
  .charac-page-header,
  .charac-summary-header,
  .charac-success-header,
  .preconsultation-header {
    border-radius: var(--curelocare-radius-lg) !important;
  }

  .cart-items-section,
  .order-summary-card,
  .checkout-card,
  .summary-card,
  .charac-section,
  .charac-card,
  .success-box,
  .welcome-box {
    padding: 24px !important;
  }
}
